<template>
<div style="margin-top: 1vw"  class="mycard">
      <span class="words">收藏歌单<i class="el-icon-arrow-right"></i></span>
      <el-row >
        <el-col :span="3" v-for="(o, index) in 10" :key="o" :offset="index % 5 == 0 ? 0 : 2">
          <el-card :body-style="{ padding: '0px'}" style="width: 13.1vw">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" style="height:15vw">
            <div style="padding: 10px; text-align: center;">
              <span>xxxxx</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            songList: [],
            search: ''
        }
    },
   
    created() {
    },
    methods: {
       
    },
}
</script>
<style scoped>

.mycard {
    padding-top: 20px;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
  }
  .words {
    font-size:2rem;
    padding-left: 20px;
    color: #ffffff;
    text-shadow: -3px -2px 3px #dbdada, 4px 3px 3px #444444;
  }
</style>